<template>
  <div class="word-import-example">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>Word文档导入示例</span>
        </div>
      </template>

      <div class="example-content">
        <h3>功能说明</h3>
        <p>本功能支持将Word文档内容解析并自动生成表单字段，主要特性包括：</p>

        <el-row :gutter="20">
          <el-col :span="12">
            <h4>📄 支持的文档格式</h4>
            <ul>
              <li>.docx (Microsoft Word 2007+)</li>
            </ul>
          </el-col>
          <el-col :span="12">
            <h4>🔍 智能字段识别</h4>
            <ul>
              <li>姓名、邮箱、电话等常见字段</li>
              <li>表格数据自动解析</li>
              <li>必填字段智能判断</li>
            </ul>
          </el-col>
        </el-row>

        <el-divider />

        <h3>使用步骤</h3>
        <el-steps :active="currentStep" finish-status="success">
          <el-step title="上传文档" description="拖拽或点击上传Word文档" />
          <el-step title="解析内容" description="系统自动解析文档内容" />
          <el-step title="预览结果" description="查看解析的文本和表格" />
          <el-step title="生成字段" description="识别并生成表单字段" />
          <el-step title="应用到设计器" description="将字段应用到表单设计器" />
        </el-steps>


        <el-divider />

        <div class="action-buttons">
          <el-button type="primary" @click="startImport">
            <el-icon>
              <Upload />
            </el-icon>
            开始导入Word文档
          </el-button>
          <el-button @click="downloadExample">
            <el-icon>
              <Download />
            </el-icon>
            下载示例文档
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Upload, Download } from '@element-plus/icons-vue'

// 定义事件
const emit = defineEmits<{
  startImport: []
}>()

const currentStep = ref(0)

// 开始导入
const startImport = () => {
  emit('startImport')
}

// 下载示例文档
const downloadExample = () => {
  // 创建一个示例Word文档的下载链接
  const exampleContent = `
用户信息表

字段名称    字段类型    是否必填    说明
姓名        文本输入    是          用户真实姓名
邮箱        邮箱输入    是          用于接收通知
电话        电话输入    否          联系电话
性别        单选        是          男/女
地址        文本域      否          详细地址信息
备注        文本域      否          其他说明信息
  `.trim()

  const blob = new Blob([exampleContent], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = '示例用户信息表.txt'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)

  ElMessage.success('示例文档已下载')
}
</script>

<style scoped lang="scss">
.word-import-example {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
  }

  .example-content {
    h3 {
      color: #303133;
      margin-bottom: 15px;
    }

    h4 {
      color: #606266;
      margin-bottom: 10px;
    }

    ul {
      margin: 10px 0;
      padding-left: 20px;

      li {
        margin: 5px 0;
        color: #606266;
      }
    }

    .example-document {
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 6px;
      padding: 20px;
      margin: 20px 0;

      h4 {
        margin-top: 0;
        color: #495057;
      }

      .example-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;

        th,
        td {
          border: 1px solid #dee2e6;
          padding: 8px 12px;
          text-align: left;
        }

        th {
          background-color: #e9ecef;
          font-weight: 600;
          color: #495057;
        }

        td {
          color: #6c757d;
        }
      }
    }

    .action-buttons {
      text-align: center;
      margin-top: 30px;

      .el-button {
        margin: 0 10px;
      }
    }
  }
}

:deep(.el-steps) {
  margin: 20px 0;
}

:deep(.el-card) {
  margin-bottom: 15px;
}
</style>
